<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>
<script>
function generateUserCard(user) {
    return `
      <div class="user-card">
        <div class="user-header">
          <div class="user-ip">${user.userIp}</div>
          <div class="user-gender">${user.userGender}</div>
        </div>
  
        <div class="user-desc">${user.userDesc}</div>
  
        <div class="user-tags">
          ${user.userTags.map(tag => `
            <div class="user-tag">${tag}</div>
          `).join('')}
        </div>
  
        <div class="user-interactions">
          <div class="interaction-item follow">
            <div class="interaction-count">${user.userInteractions[0]}</div>
            <div class="interaction-label">关注</div>
          </div>
          <div class="interaction-item follower">
            <div class="interaction-count">${user.userInteractions[1]}</div>
            <div class="interaction-label">粉丝</div>
          </div>
          <div class="interaction-item likes">
            <div class="interaction-count">${user.userInteractions[2]}</div>
            <div class="interaction-label">获赞</div>
          </div>
        </div>
      </div>
    `;
}
  const user = {
    userIp: "IP属地：四川",
    userDesc: "美妆与时尚领域创作者，分享最新潮流趋势和美妆技巧",
    userGender: "女",
    userTags: ["22岁", "四川成都", "美妆博主", "时尚博主"],
    userInteractions: ["67", "1.2万", "5.2万"]
  };
  
  document.body.innerHTML = generateUserCard(user);
  </script>
        <style>
            .user-card {
              max-width: 400px;
              background: #ffffff;
              border-radius: 12px;
              box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
              padding: 24px;
              font-family: 'Segoe UI', sans-serif;
              line-height: 1.6;
              color: #333;
            }
      
            .user-header {
              display: flex;
              justify-content: space-between;
              align-items: center;
              margin-bottom: 16px;
              flex-wrap: wrap;
            }
      
            .user-ip {
              font-size: 14px;
              color: #666;
              display: flex;
              align-items: center;
              gap: 6px;
            }
      
            .user-gender {
              font-size: 14px;
              color: #ff4081;
              font-weight: 500;
            }
      
            .user-desc {
              font-size: 15px;
              color: #444;
              margin-bottom: 20px;
              line-height: 1.6;
            }
      
            .user-tags {
              display: flex;
              flex-wrap: wrap;
              gap: 8px;
              margin-bottom: 20px;
            }
      
            .user-tag {
              background: #f0f0f0;
              padding: 3px 10px;
              border-radius: 10px;
              font-size: 12px;
              color: #555;
            }
      
            .user-interactions {
              display: flex;
              gap: 20px;
              font-size: 14px;
              color: #555;
            }
      
            .interaction-item {
              text-align: center;
            }
      
            .interaction-count {
              font-size: 18px;
              font-weight: 600;
              color: #222;
              margin-bottom: 4px;
              display: flex;
              align-items: center;
              justify-content: center;
              gap: 6px;
            }
      
            .interaction-label {
              font-size: 12px;
              color: #888;
            }
      
          </style>

